<template>
    <!-- 头部用户信息 -->
    <div class="mx-4 mt-4 p-4 box-border rounded-lg flex justify-between items-center">
        <!-- 已登录 -->
        <template v-if="isLogin">
            <div class="flex items-center">
                <nut-avatar size="large" class="rounded-full overflow-hidden">
                    <img :src="userInfo?.avatar" />
                </nut-avatar>
                <p class="ml-4">{{ userInfo?.nickName }}</p>
            </div>
        </template>

        <!-- 未登录 -->
        <div v-else class="flex items-center" @click="toLogin">
            <nut-avatar size="large" class="rounded-full overflow-hidden">
                <img :src="userInfo?.avatar" />
            </nut-avatar>
            <p class="ml-4">未登录，点击登录</p>
        </div>
    </div>

    <!-- 设置 -->
    <div class="mx-4 mt-4">
        <nut-cell-group title="" desc="">
            <nut-cell title="关于" is-link @click="aboutPopupShow = true"></nut-cell>
            <nut-cell v-if="isLogin" title="提交反馈" is-link></nut-cell>
            <nut-cell v-if="isAdmin" title="工具" is-link @click="goToToolsPage"></nut-cell>
            <nut-cell v-if="isLogin" title="退出登录" is-link @click="handleLogout"></nut-cell>
        </nut-cell-group>
    </div>

    <nut-popup v-model:visible="aboutPopupShow" closeable round :style="{ width: '70%' }">
        <div class="py-16 px-4 flex flex-col items-center">
            <p class="text-sm text-gray-500 font-bold">龙瑞家园停车难</p>
            <p class="mt-4 text-sm text-gray-500">Version 1.0.0</p>
            <p class="mt-4 text-sm text-gray-500">Copyright © 2025 停车难</p>
            <p class="mt-4 text-sm text-gray-500">All Rights Reserved</p>
        </div>
    </nut-popup>

    <!-- 车牌列表 -->
    <LicensePlateList />
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { ref } from 'vue'

import LicensePlateList from '@/components/LicensePlateList.vue'

import { useShareApp } from '@/utils/share'
useShareApp()

import { useAuth } from '@/config/auth'
const { isLogin, userInfo, isAdmin, toLogin, logout } = useAuth()

const aboutPopupShow = ref(false)

const handleLogout = () => {
    logout()
    Taro.reLaunch({
        url: '/pages/mine/index'
    })
}

const goToToolsPage = () => {
    Taro.navigateTo({
        url: '/pages/tools/index'
    })
}
</script>
